<template>
  <view>
    <view class="box" v-for="(listObj, listIndex) in listData" :key="listIndex">
      <div style="margin: 0 55rpx;"><title :title="listObj.title"></title></div>
      <section class="box_flex">
        <div
          class="box_item"
          v-for="(item, index) in listObj.items"
          :key="item.flag"
          @click="handleFn(item.flag, item.text)"
        >
          <img
            :src="item.imgUrl"
            :style="{ width: item.width, height: item.height }"
          />
          <p>{{ item.text }}</p>
        </div>
      </section>
    </view>
  </view>
</template>

<script>
import title from './title.vue'
import cpfcImg from '@/static/image/cpls.png'
import ckImg from '@/static/image/jgck.png'
import lsImg from '@/static/image/fxrk.png'
import fxckImg from '@/static/image/fxck.png'
import tjImg from '@/static/image/fxtj.png'
import bsImg from '@/static/image/bs.png'
import cxgjImg from '@/static/image/cxgj.png'
import kdcxImg from '@/static/image/kdcx.png'
import sxbcxImg from '@/static/image/sxbcx.png'
export default {
  components: {
    title,
  },
  data() {
    return {
      listData: [
        {
          title: '加工',
          items: [
            {
              imgUrl: cpfcImg,
              width: '72rpx',
              height: '67rpx',
              text: '裁片揽收',
              flag: 'cpls',
            },
            {
              imgUrl: ckImg,
              width: '56rpx',
              height: '62rpx',
              text: '正品出库',
              flag: 'gcck',
            },
          ],
        },
        {
          title: '返修',
          items: [
            {
              imgUrl: lsImg,
              width: '57rpx',
              height: '57rpx',
              text: '返修揽收',
              flag: 'fxls',
            },
            {
              imgUrl: fxckImg,
              width: '57rpx',
              height: '57rpx',
              text: '返修出库',
              flag: 'fxck',
            },
            {
              imgUrl: tjImg,
              width: '73rpx',
              height: '58rpx',
              text: '退件',
              flag: 'tj',
            },
          ],
        },
        {
          title: '其他',
          items: [
            {
              imgUrl: bsImg,
              width: '66rpx',
              height: '64rpx',
              text: '次品出库',
              flag: 'bs',
            },
            {
              imgUrl: cxgjImg,
              width: '64rpx',
              height: '64rpx',
              text: '查询工件',
              flag: 'cxgj',
            },
            {
              imgUrl: kdcxImg,
              width: '66rpx',
              height: '50rpx',
              text: '快递查询',
              flag: 'kdcx',
            },
            {
              imgUrl: sxbcxImg,
              width: '61rpx',
              height: '57rpx',
              text: '水洗标查询',
              flag: 'sxbcx',
            },
          ],
        },
      ],
    }
  },
  methods: {
    handleFn(flag, title) {
      this.$emit('handleFn', { flag, title })
    },
  },
}
</script>

<style lang="scss">
.box {
  color: #404040;
  padding: 30rpx 0;
  background: #fff;
  margin-bottom: 20rpx;

  .box_flex {
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-top: 30rpx;
    padding: 0rpx 55rpx;
    .box_item {
      height: 110rpx;
      font-size: 24rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      min-width: 120rpx;
      text-align: center;
      margin-right: 50rpx;
    }
  }
}
</style>
